<template>
  <div class="gameList">
     <div class="title">
       <div class="f-left">{{name}}</div>
       <div class="f-right">查看全部</div>
     </div>
     <div class="content" ref="content">
       <div class="slideBoxList">
         <div class="item">
           <img src="../../../assets/img/003.png" alt="">
           <span>绝地求生</span>
         </div>
         <div class="item">
           <img src="../../../assets/img/003.png" alt="">
           <span>绝地求生</span>
         </div>
         <div class="item">
           <img src="../../../assets/img/003.png" alt="">
           <span>绝地求生</span>
         </div>
         <div class="item">
           <img src="../../../assets/img/003.png" alt="">
           <span>绝地求生</span>
         </div>
         <div class="item">
           <img src="../../../assets/img/003.png" alt="">
           <span>绝地求生</span>
         </div>
       
       </div>
     </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  name: "gameList",
  data() {
    return {};
  },
  props: {
    name: ""
  },
  mounted() {
    setTimeout(() => {
      var listBox = this.$refs.content;
      var scroll = new BScroll(listBox, {
        scrollX: true,
        scrollY: false,
        click: true
      });
    }, 50);
  }
};
</script>
<style lang="stylus" scoped>
.gameList {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #E6E6E6;

  .title {
    height: 0.48rem;
    line-height: 0.48rem;
    color: #000;
    font-size: 0.16rem;
    font-family: 'PingFang-SC-Bold';
    font-weight: bold;

    .f-left {
      float: left;
    }

    .f-right {
      float: right;
      font-size: 0.14rem;
      color: #1089FF;
      font-weight: 400;
      margin-right: 0.12rem;
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 0.15rem;

    .slideBoxList {
      width: 4.2rem;
      height: 0.8rem;

      .item {
        width: 0.76rem;
        height: 1rem;
        float: left;
        margin-right: 0.07rem;
        position: relative;
        text-align: center;

        img {
          width: 0.76rem;
          height: 0.76rem;
        }

        span {
          margin-top: 0.08rem;
          display: block;
          font-size: 0.14rem;
        }
      }
    }
  }
}
</style>
